<template>
  <el-row class="h100">
    <el-col
      class="h100"
      :span="6"
      style="display: flex; justify-content: flex-end; height: 100%"
    >
      <div class="left" :class="{ stepheight: !showMore }" v-loading="loading">
        <div class="step" v-if="pointList.length>0">
          <div v-for="(item, index) in pointList" :key="index">
            <div class="app-logo" v-if="item.selected">
              <img src="~@/assets/img/icon/arrow.svg" alt />
              <span style="color: #2c77f4">当前：</span>
            </div>
            <div class="posit">
              <div class="radius end-patrol" v-if="item.status == '已巡视'">
                <span class="el-icon-check"></span>
              </div>
              <div class="radius in-patrol" v-if="item.status == '巡视中'">
                <span class="el-icon-more" style="color: white"></span>
              </div>
              <div
                class="radius wait-patrol"
                v-if="item.status == '待巡视'"
              ></div>
              <div
                class="radius no-patrol"
                v-if="item.status == '不巡视'"
              ></div>
              <div class="line" :class="{ line1: index == 0 }"></div>
            </div>
            <div class="text" @click="clickPoint(item)">
              <p class="name" :class="{ noName: item.status == '不巡视' }">
                <span>{{ `${index + 1}、 ${item.name}` }}</span>
              </p>
              <p>
                <span
                  class="sign"
                  :class="{ isInPatrol: item.status == '巡视中' }"
                  >{{ item.status }}</span
                >
                <el-divider direction="vertical"></el-divider>
                <span class="sign">{{
                  item.isSign ? "已签到" : "未签到"
                }}</span>
              </p>
            </div>
          </div>
        </div>
        <el-empty :image-size="200" v-else></el-empty>
        <div class="expend" v-if="!showMore&&pointList.length > 0">
          <span @click="expendMore">展开全部</span>
        </div>
        
      </div>
    </el-col>
    <el-col class="h100" :span="18">
      <patrolPoint :pointId="pointId" />
    </el-col>
  </el-row>
</template>

<script>
import { getPatrolPointList } from "@/api/orderManagement/patrolOrder.js";
import patrolPoint from "./patrolPoint.vue";
export default {
  props: ["orderId"],
  components: {
    patrolPoint,
  },
  data() {
    return {
      pointId: "",
      currentRow: {},
      showMore: false,
      pointList: [],
      loading: false,
    };
  },
  created() {
    this.currentRow = this.pointList[0];
    //this.getPointList();
  },
  watch: {
    pointList: {
      handler(val) {
        if (val.length >= 8) {
          this.showMore = false;
        } else {
          this.showMore = true;
        }
      },
    },
  },
  methods: {
    //展开更多
    expendMore() {
      this.showMore = true;
    },
    //点击切换巡视点
    clickPoint(item) {
      this.currentRow.selected = false;
      item.selected = true;
      this.currentRow = item;
      this.pointId = item.id;
    },
    //获取巡视点列表
    getPointList() {
      this.loading = true;
      getPatrolPointList({ patrolId: this.orderId }).then((res) => {
        if (res.code == 200 && res.data.length > 0) {
          this.handlePointList(res.data);
          this.pointId = res.data[0].id;
          this.currentRow = this.pointList[0];
          this.loading = false;
          this.$emit("setPointList", res.data);
        }else{
          this.loading = false;
        }
      });
    },
    //处理巡视点列表数据
    handlePointList(data) {
      this.pointList = data.map((item, index) => {
        let obj = {};
        obj.id = item.id;
        obj.selected = index == 0 ? true : false;
        obj.name = item.name;
        obj.isSign = item.arriveStatus == 1 ? true : false;
        obj.status = this.$store.getters.fineDirtDataName(
          "order_patrol_status",
          item.status
        );
        return obj;
      });
      this.currentRow = this.pointList[0];
    },
  },
};
</script>

<style lang="less" scoped>
.left {
  width: 400px;
  //height: 524px;
  background: #ffffff;
  overflow: hidden;
  border: 1px solid #cccccc;
  border-radius: 4px;
  margin-top: 20px;
  position: relative;
  .step {
    width: 400px;
    max-height: 700px;
    overflow: auto;
    padding-left: 32px;
    margin: 0 0 20px 0;
    > div {
      height: 61px;
      margin-bottom: 3px;
      position: relative;
    }
    .posit {
      margin-left: 70px;
      position: absolute;
      left: -28px;
      top: 16px;
      .radius {
        display: flex;
        width: 19px;
        height: 19px;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
      }
      .end-patrol {
        border: 1px solid #2c77f4;
        background: #ffffff;
        color: #2c77f4;
      }
      .in-patrol {
        background: #2c77f4;
      }
      .wait-patrol {
        // width: 11px;
        // height: 11px;
        border: 1px solid #2c77f4;
      }
      .no-patrol {
        // width: 11px;
        // height: 11px;
        border: 1px solid #ef4c4c;
      }
      .line {
        height: 45px;
        width: 1px;
        background: #2c77f4;
        position: absolute;
        left: 9px;
        top: -45px;
      }
      .line1 {
        height: 0;
        width: 0;
      }
    }
    .app-logo {
      position: absolute;
      left: -15px;
      top: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 12px;
        height: 12px;
      }
    }

    .text {
      height: 100%;
      display: flex;
      margin-left: 35px;
      cursor: pointer;
      .name {
        max-width: 160px;
        text-align: left;
        margin-left: 35px;
        margin-right: 20px;
        color: #2c77f4;
      }
      .noName {
        color: #ef4c4c;
      }
      .el-divider--vertical {
        margin: 0 8px !important;
      }
    }
  }
  .icon-show {
    margin: 50px 0 30px 45px;
    display: flex;
    li {
      display: flex;
      padding: 5px;
      .icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        margin-right: 5px;
      }
    }
  }
  .sign {
    font-size: 12px;
    color: #999999;
  }
  .isInPatrol {
    color: #00ba83;
  }
  .expend {
    width: 310px;
    height: 60px;
    position: absolute;
    bottom: 0px;
    text-align: center;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255) 50%,
      rgba(255, 255, 255, 0.5)
    );
    z-index: 999;
    padding-top: 30px;
    span {
      cursor: pointer;
    }
  }
}
.stepheight {
  height: 524px;
}
</style>
